var labelType, useGradients, nativeTextSupport, animate;

(function() {
  var ua = navigator.userAgent,
      iStuff = ua.match(/iPhone/i) || ua.match(/iPad/i),
      typeOfCanvas = typeof HTMLCanvasElement,
      nativeCanvasSupport = (typeOfCanvas == 'object' || typeOfCanvas == 'function'),
      textSupport = nativeCanvasSupport 
        && (typeof document.createElement('canvas').getContext('2d').fillText == 'function');
  //I'm setting this based on the fact that ExCanvas provides text support for IE
  //and that as of today iPhone/iPad current text support is lame
  labelType = (!nativeCanvasSupport || (textSupport && !iStuff))? 'Native' : 'HTML';
  nativeTextSupport = labelType == 'Native';
  useGradients = nativeCanvasSupport;
  animate = !(iStuff || !nativeCanvasSupport);
})();

var Log = {
  elem: false,
  write: function(text){
    if (!this.elem) 
      this.elem = document.getElementById('log');
    this.elem.innerHTML = text;
    this.elem.style.left = (500 - this.elem.offsetWidth / 2) + 'px';
  }
};


function init(){
    //初始化json数据
   // var json = "{id:\"node02\", name:\"0.2\", data:{}, children:[{id:\"node13\", name:\"部门一<p style='color:red;'>测试</p>\", data:{}, children:[{id:\"node24\", name:\"2.4\", data:{}, children:[{id:\"node35\", name:\"3.5\", data:{}, children:[{id:\"node46\", name:\"4.6\", data:{}, children:[]}]}, {id:\"node37\", name:\"3.7\", data:{}, children:[{id:\"node48\", name:\"4.8\", data:{}, children:[]}, {id:\"node49\", name:\"4.9\", data:{}, children:[]}, {id:\"node410\", name:\"4.10\", data:{}, children:[]}, {id:\"node411\", name:\"4.11\", data:{}, children:[]}]}, {id:\"node312\", name:\"3.12\", data:{}, children:[{id:\"node413\", name:\"4.13\", data:{}, children:[]}]}, {id:\"node314\", name:\"3.14\", data:{}, children:[{id:\"node415\", name:\"4.15\", data:{}, children:[]}, {id:\"node416\", name:\"4.16\", data:{}, children:[]}, {id:\"node417\", name:\"4.17\", data:{}, children:[]}, {id:\"node418\", name:\"4.18\", data:{}, children:[]}]}, {id:\"node319\", name:\"3.19\", data:{}, children:[{id:\"node420\", name:\"4.20\", data:{}, children:[]}, {id:\"node421\", name:\"4.21\", data:{}, children:[]}]}]}, {id:\"node222\", name:\"2.22\", data:{}, children:[{id:\"node323\", name:\"3.23\", data:{}, children:[{id:\"node424\", name:\"4.24\", data:{}, children:[]}]}]}]}, {id:\"node125\", name:\"部门二<p style='color:red;'>测试测试测试测试</p>\", data:{}, children:[{id:\"node226\", name:\"2.26\", data:{}, children:[{id:\"node327\", name:\"3.27\", data:{}, children:[{id:\"node428\", name:\"4.28\", data:{}, children:[]}, {id:\"node429\", name:\"4.29\", data:{}, children:[]}]}, {id:\"node330\", name:\"3.30\", data:{}, children:[{id:\"node431\", name:\"4.31\", data:{}, children:[]}]}, {id:\"node332\", name:\"3.32\", data:{}, children:[{id:\"node433\", name:\"4.33\", data:{}, children:[]}, {id:\"node434\", name:\"4.34\", data:{}, children:[]}, {id:\"node435\", name:\"4.35\", data:{}, children:[]}, {id:\"node436\", name:\"4.36\", data:{}, children:[]}]}]}, {id:\"node237\", name:\"2.37\", data:{}, children:[{id:\"node338\", name:\"3.38\", data:{}, children:[{id:\"node439\", name:\"4.39\", data:{}, children:[]}, {id:\"node440\", name:\"4.40\", data:{}, children:[]}, {id:\"node441\", name:\"4.41\", data:{}, children:[]}]}, {id:\"node342\", name:\"3.42\", data:{}, children:[{id:\"node443\", name:\"4.43\", data:{}, children:[]}]}, {id:\"node344\", name:\"3.44\", data:{}, children:[{id:\"node445\", name:\"4.45\", data:{}, children:[]}, {id:\"node446\", name:\"4.46\", data:{}, children:[]}, {id:\"node447\", name:\"4.47\", data:{}, children:[]}]}, {id:\"node348\", name:\"3.48\", data:{}, children:[{id:\"node449\", name:\"4.49\", data:{}, children:[]}, {id:\"node450\", name:\"4.50\", data:{}, children:[]}, {id:\"node451\", name:\"4.51\", data:{}, children:[]}, {id:\"node452\", name:\"4.52\", data:{}, children:[]}, {id:\"node453\", name:\"4.53\", data:{}, children:[]}]}, {id:\"node354\", name:\"3.54\", data:{}, children:[{id:\"node455\", name:\"4.55\", data:{}, children:[]}, {id:\"node456\", name:\"4.56\", data:{}, children:[]}, {id:\"node457\", name:\"4.57\", data:{}, children:[]}]}]}, {id:\"node258\", name:\"2.58\", data:{}, children:[{id:\"node359\", name:\"3.59\", data:{}, children:[{id:\"node460\", name:\"4.60\", data:{}, children:[]}, {id:\"node461\", name:\"4.61\", data:{}, children:[]}, {id:\"node462\", name:\"4.62\", data:{}, children:[]}, {id:\"node463\", name:\"4.63\", data:{}, children:[]}, {id:\"node464\", name:\"4.64\", data:{}, children:[]}]}]}]}, {id:\"node165\", name:\"部门三\", data:{}, children:[{id:\"node266\", name:\"2.66\", data:{}, children:[{id:\"node367\", name:\"3.67\", data:{}, children:[{id:\"node468\", name:\"4.68\", data:{}, children:[]}, {id:\"node469\", name:\"4.69\", data:{}, children:[]}, {id:\"node470\", name:\"4.70\", data:{}, children:[]}, {id:\"node471\", name:\"4.71\", data:{}, children:[]}]}, {id:\"node372\", name:\"3.72\", data:{}, children:[{id:\"node473\", name:\"4.73\", data:{}, children:[]}, {id:\"node474\", name:\"4.74\", data:{}, children:[]}, {id:\"node475\", name:\"4.75\", data:{}, children:[]}, {id:\"node476\", name:\"4.76\", data:{}, children:[]}]}, {id:\"node377\", name:\"3.77\", data:{}, children:[{id:\"node478\", name:\"4.78\", data:{}, children:[]}, {id:\"node479\", name:\"4.79\", data:{}, children:[]}]}, {id:\"node380\", name:\"3.80\", data:{}, children:[{id:\"node481\", name:\"4.81\", data:{}, children:[]}, {id:\"node482\", name:\"4.82\", data:{}, children:[]}]}]}, {id:\"node283\", name:\"2.83\", data:{}, children:[{id:\"node384\", name:\"3.84\", data:{}, children:[{id:\"node485\", name:\"4.85\", data:{}, children:[]}]}, {id:\"node386\", name:\"3.86\", data:{}, children:[{id:\"node487\", name:\"4.87\", data:{}, children:[]}, {id:\"node488\", name:\"4.88\", data:{}, children:[]}, {id:\"node489\", name:\"4.89\", data:{}, children:[]}, {id:\"node490\", name:\"4.90\", data:{}, children:[]}, {id:\"node491\", name:\"4.91\", data:{}, children:[]}]}, {id:\"node392\", name:\"3.92\", data:{}, children:[{id:\"node493\", name:\"4.93\", data:{}, children:[]}, {id:\"node494\", name:\"4.94\", data:{}, children:[]}, {id:\"node495\", name:\"4.95\", data:{}, children:[]}, {id:\"node496\", name:\"4.96\", data:{}, children:[]}]}, {id:\"node397\", name:\"3.97\", data:{}, children:[{id:\"node498\", name:\"4.98\", data:{}, children:[]}]}, {id:\"node399\", name:\"3.99\", data:{}, children:[{id:\"node4100\", name:\"4.100\", data:{}, children:[]}, {id:\"node4101\", name:\"4.101\", data:{}, children:[]}, {id:\"node4102\", name:\"4.102\", data:{}, children:[]}, {id:\"node4103\", name:\"4.103\", data:{}, children:[]}]}]}, {id:\"node2104\", name:\"2.104\", data:{}, children:[{id:\"node3105\", name:\"3.105\", data:{}, children:[{id:\"node4106\", name:\"4.106\", data:{}, children:[]}, {id:\"node4107\", name:\"4.107\", data:{}, children:[]}, {id:\"node4108\", name:\"4.108\", data:{}, children:[]}]}]}, {id:\"node2109\", name:\"2.109\", data:{}, children:[{id:\"node3110\", name:\"3.110\", data:{}, children:[{id:\"node4111\", name:\"4.111\", data:{}, children:[]}, {id:\"node4112\", name:\"4.112\", data:{}, children:[]}]}, {id:\"node3113\", name:\"3.113\", data:{}, children:[{id:\"node4114\", name:\"4.114\", data:{}, children:[]}, {id:\"node4115\", name:\"4.115\", data:{}, children:[]}, {id:\"node4116\", name:\"4.116\", data:{}, children:[]}]}, {id:\"node3117\", name:\"3.117\", data:{}, children:[{id:\"node4118\", name:\"4.118\", data:{}, children:[]}, {id:\"node4119\", name:\"4.119\", data:{}, children:[]}, {id:\"node4120\", name:\"4.120\", data:{}, children:[]}, {id:\"node4121\", name:\"4.121\", data:{}, children:[]}]}, {id:\"node3122\", name:\"3.122\", data:{}, children:[{id:\"node4123\", name:\"4.123\", data:{}, children:[]}, {id:\"node4124\", name:\"4.124\", data:{}, children:[]}]}]}, {id:\"node2125\", name:\"2.125\", data:{}, children:[{id:\"node3126\", name:\"3.126\", data:{}, children:[{id:\"node4127\", name:\"4.127\", data:{}, children:[]}, {id:\"node4128\", name:\"4.128\", data:{}, children:[]}, {id:\"node4129\", name:\"4.129\", data:{}, children:[]}]}]}]}, {id:\"node1130\", name:\"部门四\", data:{}, children:[{id:\"node2131\", name:\"2.131\", data:{}, children:[{id:\"node3132\", name:\"3.132\", data:{}, children:[{id:\"node4133\", name:\"4.133\", data:{}, children:[]}, {id:\"node4134\", name:\"4.134\", data:{}, children:[]}, {id:\"node4135\", name:\"4.135\", data:{}, children:[]}, {id:\"node4136\", name:\"4.136\", data:{}, children:[]}, {id:\"node4137\", name:\"4.137\", data:{}, children:[]}]}]}, {id:\"node2138\", name:\"2.138\", data:{}, children:[{id:\"node3139\", name:\"3.139\", data:{}, children:[{id:\"node4140\", name:\"4.140\", data:{}, children:[]}, {id:\"node4141\", name:\"4.141\", data:{}, children:[]}]}, {id:\"node3142\", name:\"3.142\", data:{}, children:[{id:\"node4143\", name:\"4.143\", data:{}, children:[]}, {id:\"node4144\", name:\"4.144\", data:{}, children:[]}, {id:\"node4145\", name:\"4.145\", data:{}, children:[]}, {id:\"node4146\", name:\"4.146\", data:{}, children:[]}, {id:\"node4147\", name:\"4.147\", data:{}, children:[]}]}]}]}]}";
    //end
    var json = {  
    id: "node02",  
    name: "0.2",  
    data: {},  
    children: [{  
        id: "node13",  
        name: "1.3",  
        data: {},  
        children: [{  
            id: "node24",  
            name: "2.4",  
            data: {},  
            children: [{  
                id: "node35",  
                name: "3.5",  
                data: {},  
                children: [{  
                    id: "node46",  
                    name: "4.6",  
                    data: {},  
                    children: []  
                }]  
            }, {  
                id: "node37",  
                name: "3.7",  
                data: {},  
                children: [{  
                    id: "node48",  
                    name: "4.8",  
                    data: {},  
                    children: []  
                }, {  
                    id: "node49",  
                    name: "4.9",  
                    data: {},  
                    children: []  
                }, {  
                    id: "node410",  
                    name: "4.10",  
                    data: {},  
                    children: []  
                }, {  
                    id: "node411",  
                    name: "4.11",  
                    data: {},  
                    children: []  
                }]  
            }, {  
                id: "node312",  
                name: "3.12",  
                data: {},  
                children: [{  
                    id: "node413",  
                    name: "4.13",  
                    data: {},  
                    children: []  
                }]  
            }, {  
                id: "node314",  
                name: "3.14",  
                data: {},  
                children: [{  
                    id: "node415",  
                    name: "4.15",  
                    data: {},  
                    children: []  
                }, {  
                    id: "node416",  
                    name: "4.16",  
                    data: {},  
                    children: []  
                }, {  
                    id: "node417",  
                    name: "4.17",  
                    data: {},  
                    children: []  
                }, {  
                    id: "node418",  
                    name: "4.18",  
                    data: {},  
                    children: []  
                }]  
            }, {  
                id: "node319",  
                name: "3.19",  
                data: {},  
                children: [{  
                    id: "node420",  
                    name: "4.20",  
                    data: {},  
                    children: []  
                }, {  
                    id: "node421",  
                    name: "4.21",  
                    data: {},  
                    children: []  
                }]  
            }]  
        }, {  
            id: "node222",  
            name: "2.22",  
            data: {},  
            children: [{  
                id: "node323",  
                name: "3.23",  
                data: {},  
                children: [{  
                    id: "node424",  
                    name: "4.24",  
                    data: {},  
                    children: []  
                }]  
            }]  
        }]  
    }, {  
        id: "node125",  
        name: "1.25",  
        data: {},  
        children: [{  
            id: "node226",  
            name: "2.26",  
            data: {},  
            children: [{  
                id: "node327",  
                name: "3.27",  
                data: {},  
                children: [{  
                    id: "node428",  
                    name: "4.28",  
                    data: {},  
                    children: []  
                }, {  
                    id: "node429",  
                    name: "4.29",  
                    data: {},  
                    children: []  
                }]  
            }, {  
                id: "node330",  
                name: "3.30",  
                data: {},  
                children: [{  
                    id: "node431",  
                    name: "4.31",  
                    data: {},  
                    children: []  
                }]  
            }, {  
                id: "node332",  
                name: "3.32",  
                data: {},  
                children: [{  
                    id: "node433",  
                    name: "4.33",  
                    data: {},  
                    children: []  
                }, {  
                    id: "node434",  
                    name: "4.34",  
                    data: {},  
                    children: []  
                }, {  
                    id: "node435",  
                    name: "4.35",  
                    data: {},  
                    children: []  
                }, {  
                    id: "node436",  
                    name: "4.36",  
                    data: {},  
                    children: []  
                }]  
            }]  
        }, {  
            id: "node237",  
            name: "2.37",  
            data: {},  
            children: [{  
                id: "node338",  
                name: "3.38",  
                data: {},  
                children: [{  
                    id: "node439",  
                    name: "4.39",  
                    data: {},  
                    children: []  
                }, {  
                    id: "node440",  
                    name: "4.40",  
                    data: {},  
                    children: []  
                }, {  
                    id: "node441",  
                    name: "4.41",  
                    data: {},  
                    children: []  
                }]  
            }, {  
                id: "node342",  
                name: "3.42",  
                data: {},  
                children: [{  
                    id: "node443",  
                    name: "4.43",  
                    data: {},  
                    children: []  
                }]  
            }, {  
                id: "node344",  
                name: "3.44",  
                data: {},  
                children: [{  
                    id: "node445",  
                    name: "4.45",  
                    data: {},  
                    children: []  
                }, {  
                    id: "node446",  
                    name: "4.46",  
                    data: {},  
                    children: []  
                }, {  
                    id: "node447",  
                    name: "4.47",  
                    data: {},  
                    children: []  
                }]  
            }, {  
                id: "node348",  
                name: "3.48",  
                data: {},  
                children: [{  
                    id: "node449",  
                    name: "4.49",  
                    data: {},  
                    children: []  
                }, {  
                    id: "node450",  
                    name: "4.50",  
                    data: {},  
                    children: []  
                }, {  
                    id: "node451",  
                    name: "4.51",  
                    data: {},  
                    children: []  
                }, {  
                    id: "node452",  
                    name: "4.52",  
                    data: {},  
                    children: []  
                }, {  
                    id: "node453",  
                    name: "4.53",  
                    data: {},  
                    children: []  
                }]  
            }, {  
                id: "node354",  
                name: "3.54",  
                data: {},  
                children: [{  
                    id: "node455",  
                    name: "4.55",  
                    data: {},  
                    children: []  
                }, {  
                    id: "node456",  
                    name: "4.56",  
                    data: {},  
                    children: []  
                }, {  
                    id: "node457",  
                    name: "4.57",  
                    data: {},  
                    children: []  
                }]  
            }]  
        }, {  
            id: "node258",  
            name: "2.58",  
            data: {},  
            children: [{  
                id: "node359",  
                name: "3.59",  
                data: {},  
                children: [{  
                    id: "node460",  
                    name: "4.60",  
                    data: {},  
                    children: []  
                }, {  
                    id: "node461",  
                    name: "4.61",  
                    data: {},  
                    children: []  
                }, {  
                    id: "node462",  
                    name: "4.62",  
                    data: {},  
                    children: []  
                }, {  
                    id: "node463",  
                    name: "4.63",  
                    data: {},  
                    children: []  
                }, {  
                    id: "node464",  
                    name: "4.64",  
                    data: {},  
                    children: []  
                }]  
            }]  
        }]  
    }, {  
        id: "node165",  
        name: "1.65",  
        data: {},  
        children: [{  
            id: "node266",  
            name: "2.66",  
            data: {},  
            children: [{  
                id: "node367",  
                name: "3.67",  
                data: {},  
                children: [{  
                    id: "node468",  
                    name: "4.68",  
                    data: {},  
                    children: []  
                }, {  
                    id: "node469",  
                    name: "4.69",  
                    data: {},  
                    children: []  
                }, {  
                    id: "node470",  
                    name: "4.70",  
                    data: {},  
                    children: []  
                }, {  
                    id: "node471",  
                    name: "4.71",  
                    data: {},  
                    children: []  
                }]  
            }, {  
                id: "node372",  
                name: "3.72",  
                data: {},  
                children: [{  
                    id: "node473",  
                    name: "4.73",  
                    data: {},  
                    children: []  
                }, {  
                    id: "node474",  
                    name: "4.74",  
                    data: {},  
                    children: []  
                }, {  
                    id: "node475",  
                    name: "4.75",  
                    data: {},  
                    children: []  
                }, {  
                    id: "node476",  
                    name: "4.76",  
                    data: {},  
                    children: []  
                }]  
            }, {  
                id: "node377",  
                name: "3.77",  
                data: {},  
                children: [{  
                    id: "node478",  
                    name: "4.78",  
                    data: {},  
                    children: []  
                }, {  
                    id: "node479",  
                    name: "4.79",  
                    data: {},  
                    children: []  
                }]  
            }, {  
                id: "node380",  
                name: "3.80",  
                data: {},  
                children: [{  
                    id: "node481",  
                    name: "4.81",  
                    data: {},  
                    children: []  
                }, {  
                    id: "node482",  
                    name: "4.82",  
                    data: {},  
                    children: []  
                }]  
            }]  
        }, {  
            id: "node283",  
            name: "2.83",  
            data: {},  
            children: [{  
                id: "node384",  
                name: "3.84",  
                data: {},  
                children: [{  
                    id: "node485",  
                    name: "4.85",  
                    data: {},  
                    children: []  
                }]  
            }, {  
                id: "node386",  
                name: "3.86",  
                data: {},  
                children: [{  
                    id: "node487",  
                    name: "4.87",  
                    data: {},  
                    children: []  
                }, {  
                    id: "node488",  
                    name: "4.88",  
                    data: {},  
                    children: []  
                }, {  
                    id: "node489",  
                    name: "4.89",  
                    data: {},  
                    children: []  
                }, {  
                    id: "node490",  
                    name: "4.90",  
                    data: {},  
                    children: []  
                }, {  
                    id: "node491",  
                    name: "4.91",  
                    data: {},  
                    children: []  
                }]  
            }, {  
                id: "node392",  
                name: "3.92",  
                data: {},  
                children: [{  
                    id: "node493",  
                    name: "4.93",  
                    data: {},  
                    children: []  
                }, {  
                    id: "node494",  
                    name: "4.94",  
                    data: {},  
                    children: []  
                }, {  
                    id: "node495",  
                    name: "4.95",  
                    data: {},  
                    children: []  
                }, {  
                    id: "node496",  
                    name: "4.96",  
                    data: {},  
                    children: []  
                }]  
            }, {  
                id: "node397",  
                name: "3.97",  
                data: {},  
                children: [{  
                    id: "node498",  
                    name: "4.98",  
                    data: {},  
                    children: []  
                }]  
            }, {  
                id: "node399",  
                name: "3.99",  
                data: {},  
                children: [{  
                    id: "node4100",  
                    name: "4.100",  
                    data: {},  
                    children: []  
                }, {  
                    id: "node4101",  
                    name: "4.101",  
                    data: {},  
                    children: []  
                }, {  
                    id: "node4102",  
                    name: "4.102",  
                    data: {},  
                    children: []  
                }, {  
                    id: "node4103",  
                    name: "4.103",  
                    data: {},  
                    children: []  
                }]  
            }]  
        }, {  
            id: "node2104",  
            name: "2.104",  
            data: {},  
            children: [{  
                id: "node3105",  
                name: "3.105",  
                data: {},  
                children: [{  
                    id: "node4106",  
                    name: "4.106",  
                    data: {},  
                    children: []  
                }, {  
                    id: "node4107",  
                    name: "4.107",  
                    data: {},  
                    children: []  
                }, {  
                    id: "node4108",  
                    name: "4.108",  
                    data: {},  
                    children: []  
                }]  
            }]  
        }, {  
            id: "node2109",  
            name: "2.109",  
            data: {},  
            children: [{  
                id: "node3110",  
                name: "3.110",  
                data: {},  
                children: [{  
                    id: "node4111",  
                    name: "4.111",  
                    data: {},  
                    children: []  
                }, {  
                    id: "node4112",  
                    name: "4.112",  
                    data: {},  
                    children: []  
                }]  
            }, {  
                id: "node3113",  
                name: "3.113",  
                data: {},  
                children: [{  
                    id: "node4114",  
                    name: "4.114",  
                    data: {},  
                    children: []  
                }, {  
                    id: "node4115",  
                    name: "4.115",  
                    data: {},  
                    children: []  
                }, {  
                    id: "node4116",  
                    name: "4.116",  
                    data: {},  
                    children: []  
                }]  
            }, {  
                id: "node3117",  
                name: "3.117",  
                data: {},  
                children: [{  
                    id: "node4118",  
                    name: "4.118",  
                    data: {},  
                    children: []  
                }, {  
                    id: "node4119",  
                    name: "4.119",  
                    data: {},  
                    children: []  
                }, {  
                    id: "node4120",  
                    name: "4.120",  
                    data: {},  
                    children: []  
                }, {  
                    id: "node4121",  
                    name: "4.121",  
                    data: {},  
                    children: []  
                }]  
            }, {  
                id: "node3122",  
                name: "3.122",  
                data: {},  
                children: [{  
                    id: "node4123",  
                    name: "4.123",  
                    data: {},  
                    children: []  
                }, {  
                    id: "node4124",  
                    name: "4.124",  
                    data: {},  
                    children: []  
                }]  
            }]  
        }, {  
            id: "node2125",  
            name: "2.125",  
            data: {},  
            children: [{  
                id: "node3126",  
                name: "3.126",  
                data: {},  
                children: [{  
                    id: "node4127",  
                    name: "4.127",  
                    data: {},  
                    children: []  
                }, {  
                    id: "node4128",  
                    name: "4.128",  
                    data: {},  
                    children: []  
                }, {  
                    id: "node4129",  
                    name: "4.129",  
                    data: {},  
                    children: []  
                }]  
            }]  
        }]  
    }, {  
        id: "node1130",  
        name: "1.130",  
        data: {},  
        children: [{  
            id: "node2131",  
            name: "2.131",  
            data: {},  
            children: [{  
                id: "node3132",  
                name: "3.132",  
                data: {},  
                children: [{  
                    id: "node4133",  
                    name: "4.133",  
                    data: {},  
                    children: []  
                }, {  
                    id: "node4134",  
                    name: "4.134",  
                    data: {},  
                    children: []  
                }, {  
                    id: "node4135",  
                    name: "4.135",  
                    data: {},  
                    children: []  
                }, {  
                    id: "node4136",  
                    name: "4.136",  
                    data: {},  
                    children: []  
                }, {  
                    id: "node4137",  
                    name: "4.137",  
                    data: {},  
                    children: []  
                }]  
            }]  
        }, {  
            id: "node2138",  
            name: "2.138",  
            data: {},  
            children: [{  
                id: "node3139",  
                name: "3.139",  
                data: {},  
                children: [{  
                    id: "node4140",  
                    name: "4.140",  
                    data: {},  
                    children: []  
                }, {  
                    id: "node4141",  
                    name: "4.141",  
                    data: {},  
                    children: []  
                }]  
            }, {  
                id: "node3142",  
                name: "3.142",  
                data: {},  
                children: [{  
                    id: "node4143",  
                    name: "4.143",  
                    data: {},  
                    children: []  
                }, {  
                    id: "node4144",  
                    name: "4.144",  
                    data: {},  
                    children: []  
                }, {  
                    id: "node4145",  
                    name: "4.145",  
                    data: {},  
                    children: []  
                }, {  
                    id: "node4146",  
                    name: "4.146",  
                    data: {},  
                    children: []  
                }, {  
                    id: "node4147",  
                    name: "4.147",  
                    data: {},  
                    children: []  
                }]  
            }]  
        }]  
    }]  
};  
    //A client-side tree generator 生成客户端树
    var getTree = (function() {
        var i = 0;
        return function(nodeId, level) {
          var subtree = eval('(' + json.replace(/id:\"([a-zA-Z0-9]+)\"/g, 
          function(all, match) {
            return "id:\"" + match + "_" + i + "\""  
          }) + ')');
          $jit.json.prune(subtree, level); i++;
          return {
              'id': nodeId,
              'children': subtree.children
          };
        };
    })();
    
    //Implement a node rendering function called 'nodeline' that plots a straight line
    //when contracting or expanding a subtree.
    //实现节点渲染函数nodeline,在收缩或展开的子树时绘制一条直线
    $jit.ST.Plot.NodeTypes.implement({
        'nodeline': {
          'render': function(node, canvas, animating) {
                if(animating === 'expand' || animating === 'contract') {
                  var pos = node.pos.getc(true), nconfig = this.node, data = node.data;
                  var width  = nconfig.width, height = nconfig.height;
                  var algnPos = this.getAlignedPos(pos, width, height);
                  var ctx = canvas.getCtx(), ort = this.config.orientation;
                  ctx.beginPath();
                  if(ort == 'left' || ort == 'right') {
                      ctx.moveTo(algnPos.x, algnPos.y + height / 2);
                      ctx.lineTo(algnPos.x + width, algnPos.y + height / 2);
                  } else {
                      ctx.moveTo(algnPos.x + width / 2, algnPos.y);
                      ctx.lineTo(algnPos.x + width / 2, algnPos.y + height);
                  }
                  ctx.stroke();
              } 
          }
        }
          
    });

    //Create a new ST instance  
var st = new $jit.ST({  
    //id of viz container element  
    injectInto: 'infovis',  
    //set duration for the animation  
    duration: 800,  
    width: 1000,  
  	height: 500, 
    //set animation transition type  
    transition: $jit.Trans.Quart.easeInOut,  
    //set distance between node and its children  
    levelDistance: 50,  
    //enable panning  
    Navigation: {  
      enable:false,  
      panning:false  
    },  
    //set node and edge styles  
    //set overridable=true for styling individual  
    //nodes or edges  
    Node: {  
        height: 30,  
        width: 100,  
        type: 'rectangle',  
        color: '#00B3E7',  
        overridable: true
    },  
      
    Edge: {  
        type: 'bezier',  
        overridable: true  
    },  
/*      
    onBeforeCompute: function(node){  
        Log.write("loading " + node.name);  
    },  
      
    onAfterCompute: function(){  
        Log.write("done");  
    },  
      */
    //This method is called on DOM label creation.  
    //Use this method to add event handlers and styles to  
    //your node.  
    onCreateLabel: function(label, node){  
        label.id = node.id;              
        label.innerHTML = node.name;        
        //set label styles  
        var style = label.style;  
        style.width = 60 + 'px';  
        style.height = 17 + 'px';              
        style.cursor = 'pointer';  
        style.color = '#fff';  
        style.fontSize = '0.8em';  
        style.textAlign= 'center';  
        style.paddingTop = '3px';  
         label.onclick = function(){
            /*if(normal.checked) {  
              st.onClick(node.id);  
            } else {  
            st.setRoot(node.id, 'animate');  
            }  */
           label.style.color = '#D84C29';
           alert(node.id);
        }; 
    },  
      
    //This method is called right before plotting  
    //a node. It's useful for changing an individual node  
    //style properties before plotting it.  
    //The data properties prefixed with a dollar  
    //sign will override the global node style properties.  
    onBeforePlotNode: function(node){  
        //add some color to the nodes in the path between the  
        //root node and the selected node.  
        if (node.selected) {  
            node.data.$color = "#00B3E7";  
        }  
        else {  
            delete node.data.$color;  
            //if the node belongs to the last plotted level  
            if(!node.anySubnode("exist")) {  
                //count children number  
                var count = 0;  
                node.eachSubnode(function(n) { count++; });  
                //assign a node color based on  
                //how many children it has  
                node.data.$color = ['#00B3E7', '#00B3E7', '#00B3E7', '#00B3E7', '#00B3E7', '#00B3E7'][count];                      
            }   
        }  
    },  
      
    //This method is called right before plotting  
    //an edge. It's useful for changing an individual edge  
    //style properties before plotting it.  
    //Edge data proprties prefixed with a dollar sign will  
    //override the Edge global style properties.  
    onBeforePlotLine: function(adj){  
        if (adj.nodeFrom.selected && adj.nodeTo.selected) {  
            adj.data.$color = "#eed";  
            adj.data.$lineWidth = 3;  
        }  
        else {  
            delete adj.data.$color;  
            delete adj.data.$lineWidth;  
        }  
    }  
});  
//load json data  
st.loadJSON(json);  
//compute node positions and layout  
st.compute();  
//optional: make a translation of the tree  
st.geom.translate(new $jit.Complex(-200, 0), "current");  
//emulate a click on the root node.  
st.onClick(st.root); 
    //end
    //Add event handlers to switch spacetree orientation. 添加事件处理程序切换spacetree树展示的方向
   function get(id) {
      return document.getElementById(id);  
    };

    var top = get('r-top'), 
    left = get('r-left'), 
    bottom = get('r-bottom'), 
    right = get('r-right');
    
    function changeHandler() {
        if(this.checked) {
            top.disabled = bottom.disabled = right.disabled = left.disabled = true;
            st.switchPosition(this.value, "animate", {
                onComplete: function(){
                    top.disabled = bottom.disabled = right.disabled = left.disabled = false;
                }
            });
        }
    };
    
    top.onchange = left.onchange = bottom.onchange = right.onchange = changeHandler;
    //end

}
